<template>
  <el-dialog
    :visible.sync="visible"
    :title="!dataForm.id ? $t('add') : $t('update')"
    @close="CloseDialog_"
  >
    <el-form
      :model="dataForm"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmitHandle()"
      label-width="100px"
      class="fromStyle"
      inline
    >
      <!-- <el-form-item label="客源类型" prop="customerType">
          <el-input v-model="dataForm.customerType" placeholder="客源类型（5-求租商铺"></el-input>
      </el-form-item>
          <el-form-item label="租售类型" prop="transactionType">
          <el-input v-model="dataForm.transactionType" placeholder="租售类型"></el-input>
      </el-form-item>-->
      <el-form-item label="物业类型" prop="type">
        <ren-select v-model="dataForm.type" dict-type="dictType" placeholder="物业类型" class="w100"></ren-select>
      </el-form-item>
      <el-form-item label="客户姓名" prop="customerName" v-if="!dataForm.id">
        <el-input v-model="dataForm.customerName" placeholder="客户姓名"></el-input>
      </el-form-item>
      <el-form-item label="客户电话1" prop="customerPhone1" v-if="!dataForm.id">
        <el-input v-model="dataForm.customerPhone1" placeholder="客户电话1"></el-input>
      </el-form-item>
      <el-form-item label="客户电话2" prop="customerPhone2" v-if="!dataForm.id">
        <el-input v-model="dataForm.customerPhone2" placeholder="客户电话2"></el-input>
      </el-form-item>
      <el-form-item label="委托人姓名" prop="clientName" v-if="!dataForm.id">
        <el-input v-model="dataForm.clientName" placeholder="委托人姓名"></el-input>
      </el-form-item>
      <el-form-item label="委托人电话1" prop="clientPhone1" v-if="!dataForm.id">
        <el-input v-model="dataForm.clientPhone1" placeholder="委托人电话1"></el-input>
      </el-form-item>
      <el-form-item label="委托人电话2" prop="clientPhone2" v-if="!dataForm.id">
        <el-input v-model="dataForm.clientPhone2" placeholder="委托人电话2"></el-input>
      </el-form-item>
      <el-form-item label="客户来源" prop="source">
        <ren-select
          v-model="dataForm.source"
          dict-type="customerSource"
          placeholder="客户来源"
          class="w100"
        ></ren-select>
      </el-form-item>
      <el-form-item label="位置类型" prop="addressType">
        <el-input v-model="dataForm.addressType" placeholder="位置类型"></el-input>
      </el-form-item>
      <el-form-item label="行政区域" prop="districtCode">
        <el-select v-model="dataForm.districtCode" style="width:100%" placeholder="行政区域">
          <el-option
            v-for="item in this.$store.state.CityRegion"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="需求楼盘" prop="dictIdList">
        <el-select
          v-model="dataForm.dictIdList"
          filterable
          multiple
          clearable
          placeholder="关键字搜索"
          style="width:100%"
        >
          <el-option
            v-for="item in this.$store.state.dictList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="需求面积小" prop="areas">
        <el-input v-model="dataForm.areas" placeholder="需求面积小"></el-input>
      </el-form-item>
      <el-form-item label="需求面积大" prop="areae">
        <el-input v-model="dataForm.areae" placeholder="需求面积大"></el-input>
      </el-form-item>
      <el-form-item label="需求价格小" prop="prices">
        <el-input v-model="dataForm.prices" placeholder="需求价格小"></el-input>
      </el-form-item>
      <el-form-item label="需求价格大" prop="pricee">
        <el-input v-model="dataForm.pricee" placeholder="需求价格大"></el-input>
      </el-form-item>
      <el-form-item label="需求楼层低" prop="storeys">
        <el-input v-model="dataForm.storeys" placeholder="需求楼层低"></el-input>
      </el-form-item>
      <el-form-item label="需求楼层高" prop="storeye">
        <el-input v-model="dataForm.storeye" placeholder="需求楼层高"></el-input>
      </el-form-item>
      <el-form-item label="沟通阶段" prop="communication">
        <ren-select
          v-model="dataForm.communication"
          dict-type="customerCommunication"
          placeholder="沟通阶段"
          class="w100"
        ></ren-select>
      </el-form-item>
      <el-form-item label="是否急切" prop="eager">
        <el-select v-model="dataForm.eager" style="width:100%" placeholder="是否急切">
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="付款方式" prop="payType">
        <ren-select
          v-model="dataForm.payType"
          dict-type="dictTenanPay"
          placeholder="付款方式"
          class="w100"
        ></ren-select>
      </el-form-item>
      <el-form-item label="房屋朝向" prop="direction">
        <ren-select
          v-model="dataForm.direction"
          dict-type="dictDirection"
          placeholder="房屋朝向"
          class="w100"
        ></ren-select>
      </el-form-item>
      <el-form-item label="装修要求" prop="renovation">
        <ren-select
          v-model="dataForm.renovation"
          dict-type="dictRenovation"
          placeholder="装修"
          class="w100"
        ></ren-select>
      </el-form-item>
      <el-form-item label="客源状态" prop="state" v-if="!dataForm.id">
        <ren-select v-model="dataForm.state" dict-type="customerState" style="width:100%"></ren-select>
      </el-form-item>
      <el-form-item label="入住时间" prop="inTime">
        <el-date-picker
          v-model="dataForm.inTime"
          type="date"
          placeholder="选择日期"
          value-format="timestamp"
          style="width:100%"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="客源等级" prop="grade">
        <el-input v-model="dataForm.grade" placeholder="客源等级"></el-input>
      </el-form-item>
      <el-form-item label="客户行业" prop="occupation">
        <el-input v-model="dataForm.occupation" placeholder="客户行业"></el-input>
      </el-form-item>
      <el-form-item label="客户职位" prop="position">
        <el-input v-model="dataForm.position" placeholder="客户职位"></el-input>
      </el-form-item>
      <el-form-item label="佣金" prop="commission">
        <el-input v-model="dataForm.commission" placeholder="佣金"></el-input>
      </el-form-item>
      <el-form-item label="现办公室地址" prop="address">
        <el-input v-model="dataForm.address" placeholder="现办公室地址"></el-input>
      </el-form-item>
      <el-form-item label="公司信息" prop="company">
        <el-input v-model="dataForm.company" placeholder="公司信息"></el-input>
      </el-form-item>
      <el-form-item label="看房经历" prop="experience" class="FormitemW100">
        <el-input v-model="dataForm.experience" placeholder="看房经历"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark" class="FormitemW100">
        <el-input v-model="dataForm.remark" placeholder="备注" type="textarea" :rows="2"></el-input>
      </el-form-item>
      <!-- <el-form-item label="部门" prop="deptId">
          <el-input v-model="dataForm.deptId" placeholder="部门"></el-input>
      </el-form-item>
          <el-form-item label="经纪人" prop="maintain">
          <el-input v-model="dataForm.maintain" placeholder="经纪人"></el-input>
      </el-form-item>
          <el-form-item label="城市租户编码" prop="tenantCode">
          <el-input v-model="dataForm.tenantCode" placeholder="城市租户编码"></el-input>
      </el-form-item>
              <el-form-item label="修改人" prop="updater">
          <el-input v-model="dataForm.updater" placeholder="修改人"></el-input>
      </el-form-item>
          <el-form-item label="修改时间" prop="updateDate">
          <el-input v-model="dataForm.updateDate" placeholder="修改时间"></el-input>
      </el-form-item>
          <el-form-item label="删除标识" prop="deleteFlag">
          <el-input v-model="dataForm.deleteFlag" placeholder="删除标识"></el-input>
      </el-form-item>-->
    </el-form>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from "lodash/debounce";
export default {
  data() {
    return {
      visible: true,
      dataForm: {
        id: "",
        customerType: "",
        transactionType: "",
        type: "",
        customerName: "",
        customerPhone1: "",
        customerPhone2: "",
        clientName: "",
        clientPhone1: "",
        clientPhone2: "",
        source: "",
        addressType: "",
        districtCode: "",
        dictId: "",
        dictIdList: [],
        areas: "",
        areae: "",
        prices: "",
        pricee: "",
        storeys: "",
        storeye: "",
        communication: "",
        eager: "",
        payType: "",
        direction: "",
        renovation: "",
        state: "",
        inTime: "",
        grade: "",
        occupation: "",
        position: "",
        commission: "",
        address: "",
        company: "",
        experience: "",
        remark: "",
        deptId: "",
        maintain: "",
        tenantCode: "",
        creator: "",
        createDate: "",
        updater: "",
        updateDate: "",
        deleteFlag: ""
      }
    };
  },
  props: ["customerinto"],
  created() {
    if (this.customerinto) {
      this.dataForm.customerName = this.customerinto.customerName;
      this.dataForm.customerPhone1 = this.customerinto.customerPhone1;
      this.dataForm.customerPhone2 = this.customerinto.customerPhone2;
      this.dataForm.company = this.customerinto.company;
    }
  },
  methods: {
    init() {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.getInfo();
        }
      });
    },
    CloseDialog_() {
      this.$emit("CloseDialog");
    },
    // 获取信息
    getInfo() {
      this.$http
        .get(`/customer/customerzsinfo/${this.dataForm.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data
          };
        })
        .catch(() => {});
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function() {
        this.$refs["dataForm"].validate(valid => {
          if (!valid) {
            return false;
          }
          this.$http[!this.dataForm.id ? "post" : "put"](
            "/customer/customerzsinfo/",
            this.dataForm
          )
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.visible = false;
                  if (this.customerinto) {
                    this.$emit("deleteResources");
                  }
                  this.$emit("refreshDataList");
                }
              });
            })
            .catch(() => {});
        });
      },
      1000,
      { leading: true, trailing: false }
    )
  }
};
</script>
